<template>
  <van-search shape="round" placeholder="请输入搜索关键词" show-action class="search" v-model="text">
    <template #left>
      <van-icon name="arrow-left" color="#fff" @click="reto" />
    </template>

    <template #action>
      <span @click="search" style="color:#eee">搜索</span>
    </template>
  </van-search>
  <div class="history" style="margin-top: 10px;">
    <div class="history-title" style="display: flex;justify-content: space-between;">
      <span style="font-weight: 600;font-size: 16px;">搜索历史</span>
      <div>
        <van-icon name="delete-o" style="margin-right: 15px;"/>
      </div>
    </div>
    <div class="history-son" style="font-weight: 100;font-size: 12px;">
      <div class="son">原神</div>
      <div class="son">王者荣耀</div>
      <div class="son">The Shy</div>
      <div class="son">JavaScript</div>
      <div class="son">vue3</div>
    </div>
  </div>
</template>
  
<script setup>
import { useRouter } from 'vue-router';
import axios from '../api/index.js'
import { ref } from 'vue';

const text = ref('')
const router = useRouter()
const reto = () => {
  router.push('/tabbar')
}
const search = () => {
  router.push({ path: '/searchimg', query: { text: text.value } })
}


</script>
  
<style lang="less" scoped>
.search {
  background: #fb7299
}
</style>